<template>
  <el-dialog
    title="流程数据信息"
    v-model="dialogVisible"
    width="70%"
  >
    <!--一个高亮显示的插件-->
    <v-ace-editor
      v-model:value="flowJsonData"
      @init="editorInit"
      lang="json"
      theme="chrome"
      style="height: 400px"/>
  </el-dialog>
</template>

<script>
import {VAceEditor} from 'vue3-ace-editor';

export default {
  props: {
    data: Object,
  },
  data() {
    return {
      dialogVisible: false,
      flowJsonData: {},
      options: {
        mode: {name: "javascript", json: true},
        lineNumbers: true
      }
    }
  },
  components: {
    VAceEditor
  },
  methods: {
    init() {
      this.dialogVisible = true
      this.flowJsonData = JSON.stringify(this.data, null, 4).toString()
    }
  }
}
</script>
